import React, { Component } from 'react';
import Avatar from 'material-ui/Avatar';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import { Card, CardText } from 'material-ui/Card';

import CONFIG from '../../config';
import { errorHandle } from '../Utils/ErrorHandle';

export default class EditUserImg extends Component {
  render() {
  	return (
      <Card className='card-line center-block' style={styles.card}>
        <CardText style={{textAlign: 'center', paddingTop: 32, paddingBottom: 24}}>
          <div className='center-block' style={styles.panel}>
            <Avatar 
              style={styles.userImg} 
              size={124} 
              src={this.props.userImg}
            />
            <IconButton 
              iconStyle={{color: 'rgb(255,255,255)'}} 
              style={styles.btn1} 
              iconClassName="icon-photo_camera" 
              onTouchTap={this.props.handleOpen.bind(this, 'userImg')}
            />
          </div>

          <TextField
            defaultValue={this.props.userName}
            floatingLabelText="真实姓名"
            onChange={this.props.handleChangeText.bind(this, 'userName')}
            errorText={errorHandle(this.props.error, 'user_name')}
            errorStyle={{textAlign: 'left'}}
          />
        </CardText>
      </Card>
  	);
  }
};

const styles = {
  card: {
    maxWidth: 728,
    position: 'relative',
    marginBottom: 0,
  },
  panel: {
    width: 128,
    position: 'relative',
    textAlign: 'center'
  },
  img: {
    width: '100%'
  },
  userImg: {
    width: 124,
    height: 124,
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff'
  },
  btn1: {
    position:'absolute', 
    left: 40,
    top: 38, 
    backgroundColor: 'rgba(0,0,0,0.24)', 
    borderRadius: '50%'
  },
};
